<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .d1{
      width: 100px;
      height: 100px;
      background-color: red;
      /* 指定边框宽度不能独立存在 */
      border-width: 10px;
      /* 指定边框样式 */
      border-style: dashed;
      /* 指定边框颜色(默认黑色) */
      border-color: blue;
      /* 简写方式，中间用空格分开 没有顺序 */
      border: 5px solid green;
    }
    .d2{
      /* 给一个宽度，否则就很长了 */
      width: 120px;
      /* 只给下边框 */
      border-bottom: 5px solid red;
      /* 文字水平居中 */
      text-align: center;
    }
    /* 三角形 */
    .d3{
      /* 宽度高度先为0，高度可以删除不写，宽度一定要为0 */
      width: 0px;
      height: 0px;
      /* 先写一个所有边，透明颜色 */
      border: 100px solid transparent;
      /* 再写需要的角度边，加颜色 */
      /* border-bottom-color: 100px solid red; */
      border-top-color: red;
    }
    
  </style>
</head>

<body>
   <div class="d1"></div>
   <!-- 用一个div写“重点内容”四个字下要加5px的红色的下横线 并且文字要在横线上左右居中 -->
   <div class="d2">重点内容</div><br><br>

   <!-- 三角形 -->
   <div class="d3"></div>
   

</html>